import React, { useState } from "react";
import styles from "./menu.module.css";

interface MeanButtonProps {
  MenuBar?: string;
  meanClick?: () => void;
  className?: string;
}

const MeanButton: React.FC<MeanButtonProps> = ({ MenuBar = "white", meanClick, className }) => {
  const [isCross, setIsCross] = useState(false);

  const handleMean = () => {
    setIsCross((prev) => !prev);
    if (meanClick) meanClick();
  };

  // 动态类名
  const btnClass = [
    styles.menuButton,
    isCross ? styles.cross : "",
    className ? className : "",
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div className={btnClass} onClick={handleMean}>
      <div className={styles.bar} style={{ backgroundColor: MenuBar }}></div>
      <div className={styles.bar} style={{ backgroundColor: MenuBar }}></div>
      <div className={styles.bar} style={{ backgroundColor: MenuBar }}></div>
    </div>
  );
};

export default MeanButton;